<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>欢迎您登录BizCMF</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
       	<link rel="stylesheet" type="text/css" href="{:get_url_path('bootstrap')}/3.3.4/css/bootstrap.min.css" media="all" />
       	<link rel="stylesheet" type="text/css" href="__CSS__/login.css" media="all" />
       	<link rel="stylesheet" type="text/css" href="__CSS__/{:C('DEFAULT_THEME_COLOR')}.css" media="all">
    </head>
    <body>
        <div class='container'>
            <div class="row">
                <div class="col-xs-1 col-sm-3 col-md-4"></div>
                <div class="col-xs-10 col-sm-6 col-md-4">
                    <form action="{:url('public/login')}" method="post" class="login-form">
                        <h3>BizCMF管理平台</h3>
                        <div id="itemBox" class="item-box">
                            <div class="item row">
                                <i class="icon-login-user hidden-xs"></i>
                                <input type="text" class="" name="username" placeholder="请填写用户名" autocomplete="off" />
                            </div>
                            <span class="placeholder_copy placeholder_un">请填写用户名</span>
                            <div class="item row">
                                <i class="icon-login-pwd hidden-xs"></i>
                                <input type="password" name="password" placeholder="请填写密码" autocomplete="off" />
                            </div>
                            <span class="placeholder_copy placeholder_pwd">请填写密码</span>
                            <div class="item verifycode row">
                                <i class="icon-login-verifycode hidden-xs"></i>
                                <input type="text" name="verify" placeholder="请填写验证码" autocomplete="off">
                            </div>
                            <span class="placeholder_copy placeholder_check">请填写验证码</span>
                            <div class="row">
                                <img class="verifyimg reloadverify col-xs-12" alt="点击切换" src="{:url('admin/public/verify/login')}" />
                            </div>
                        </div>
                        <div class="login_btn_panel">
                            <button class="login-btn" type="submit">
                                <span class="in"><i class="icon-loading"></i>登 录 中 ...</span>
                                <span class="on">登 录</span>
                            </button>
                            <div class="check-tips"></div>
                        </div>
                    </form>
                </div>
                <div class="col-xs-1 col-sm-3 col-md-4"></div>
            </div>
        </div>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="{:get_url_path('js')}/jquery-1.10.2.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script type="text/javascript" src="{:get_url_path('js')}/jquery-2.0.3.min.js"></script>
    <!--<![endif]-->
    <script type="text/javascript">
    	/* 登陆表单获取焦点变色 */
    	$(".login-form").on("focus", "input", function(){
            $(this).closest('.item').addClass('focus');
        }).on("blur","input",function(){
            $(this).closest('.item').removeClass('focus');
        });
        $(".item").click(function(){
            $(this).find("input").focus();
        });
    	//表单提交
    	$(document).ajaxStart(function(){
                $("button:submit").addClass("log-in").attr("disabled", true);
            }).ajaxStop(function(){
                $("button:submit").removeClass("log-in").attr("disabled", false);
            });

    	$("form").submit(function(){
            var self = $(this);
            $.post(self.attr("action"), self.serialize(), success, "json");
            return false;

            function success(data){
                if(data.status){
                    window.location.href = data.url;
                } else {
                    self.find(".check-tips").text(data.info);
                    //刷新验证码
                    $(".reloadverify").click();
                }
            }
    	});

        $(function(){
            //兼容小屏幕
            if($(window).width() < 350){
                $(".login-form h3").css("font-size","22px");
                $(".login-form").css("margin-top","20px");
                $(".login-form").css("margin-bottom","0");
            }
            //初始化选中用户名输入框
            $("#itemBox").find("input[name=username]").focus();
            //刷新验证码
            var verifyimg = $(".verifyimg").attr("src");
            $(".reloadverify").click(function(){
                if( verifyimg.indexOf('?')>0){
                    $(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
                }else{
                    $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
                }
                $("#itemBox").find("input[name=verify]").focus();
            });

            //placeholder兼容性
                //如果支持 
            function isPlaceholer(){
                var input = document.createElement('input');
                return "placeholder" in input;
            }
                //如果不支持
            if(!isPlaceholer()){
                $(".placeholder_copy").css({
                    display:'block'
                });
                $("#itemBox input").keydown(function(){
                    $(this).parents(".item").next(".placeholder_copy").css({
                        display:'none'
                    });                    
                });
                $("#itemBox input").blur(function(){
                    if($(this).val()===""){
                        $(this).parents(".item").next(".placeholder_copy").css({
                            display:'block'
                        });
                    }
                });
            }
	});
    </script>
</body>
</html>
